<script setup>
import { reactive, computed, ref, onMounted, onBeforeMount } from 'vue'
import rankScore from './rankScore.vue'
import rankAward from './rankAward.vue'
import { useStore } from 'vuex'
import Toast from '../../../components/toast.vue';
const store = useStore()
const api = store.state.api
// 日期
let calenderList = reactive({
    result: [
        // {
        //     "calendarId": 1,
        //     "day": "20240223",
        //     "flag": 1,
        //     "title": "03月22日"
        // },
        // {
        //     "calendarId": 2,
        //     "day": "20240224",
        //     "flag": 0,
        //     "title": "03月23日"
        // },
        // {
        //     "calendarId": 3,
        //     "day": "20240225",
        //     "flag": 0,
        //     "title": "03月24日"
        // }
    ]
})
const calendar = computed(() => {
    return calenderList.result
})
let tabIndex = ref(0)
// 日期定位
const getToday = async () => {
    await api.leg2Calendar().then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": [
        //             {
        //                 "calendarId": 1,
        //                 "day": "20240223",
        //                 "flag": 0,
        //                 "title": "03月22日"
        //             },
        //             {
        //                 "calendarId": 2,
        //                 "day": "20240224",
        //                 "flag": 1,
        //                 "title": "03月23日"
        //             },
        //             {
        //                 "calendarId": 3,
        //                 "day": "20240225",
        //                 "flag": 0,
        //                 "title": "03月24日"
        //             }
        //         ],
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        let data = res.data.result
        if (data) {
            calenderList.result = data
            data.forEach(item => {
                if (item.flag == 1) tabIndex.value = item.calendarId
            });
        }
    })
}
getToday()
onMounted(() => {

})
const rank = ref()
// 日期点击事件
const getTabIndex = (index) => {
    if (tabIndex.value == index) return
    tabIndex.value = index
    if (rankIndex.value == 0) rank.value.page = 0
}
// 榜单点击事件
let rankIndex = ref(0)
const getRankIndex = (index) => {
    if (rankIndex.value == index) return
    rankIndex.value = index
    store.commit('getFirst', false)
}
</script>

<template>
    <div class="leg2">
        <ul class="tab">
            <li v-for="(item, index) in calendar" :key="index" :class="{ active: tabIndex == item.calendarId }"
                @click="getTabIndex(item.calendarId)">{{
                    item.title }}
            </li>
        </ul>
        <div class="content">
            <div class="rule">
                <p>根据参赛主播今日收到联赛礼物，对应获得的联赛值排名</p>
                <p>今日<span>前{{ [200, 160, 120][tabIndex - 1] }}名</span> 晋级到{{ tabIndex - 1 != 2 ? '次日比赛中' : '下个赛段' }}</p>
            </div>
            <div class="rankBox_box">
                <div class="rankBox">
                    <ul class="rankTab">
                        <p></p>
                        <li v-for="(item, index) in ['联赛值榜', '联赛壕礼']" :key="index" :class="{ active: rankIndex == index }"
                            @click="getRankIndex(index)">{{ item }}
                        </li>
                    </ul>
                    <rankScore v-if="rankIndex == 0" :tab-index="tabIndex" ref="rank" />
                    <rankAward :tab-index="tabIndex" v-else />
                </div>
            </div>
        </div>
        <Toast toast-style="leg1" v-if="store.state.showType == 'leg2'">
            <p class="close" @click="store.commit('changeIsShow')" />
            <div class="ruleBox">
                <div>
                    <p>赛段时间</p>
                    <p>03月22日00:00--03月24日24:00</p>
                </div>
                <div>
                    <p>晋级规则</p>
                    <p>根据参赛主播每天累积的联赛值进行排名，每日晋级规定数量的主播，每日联赛值都将清空重新累计</p>
                    <ul class="ruleList">
                        <li><span></span>3月22日，排名前200名的主播晋级到3月23日的比赛中</li>
                        <li><span></span>3月23日，排名前160名的主播晋级到3月24日的比赛中</li>
                        <li><span></span>3月24日，排名前120名的主播晋级到下个赛段</li>
                    </ul>
                </div>
                <div>
                    <p>联赛壕礼</p>
                    <p>根据参赛主播每天收到的联赛票数量，可获得对应奖励</p>
                    <ul class="ruleList">
                        <li><span></span>3月22日，每收到39,999个联赛票，即可获得灯塔*1(单价50,000豆)</li>
                        <li><span></span>3月23日，每收到39,999个联赛票，即可获得热气球*1(单价100,000豆)</li>
                        <li><span></span>3月24日，每收到39,999个联赛票，即可获得小熊乐园*1(单价150,000豆)</li>
                    </ul>
                    <p><i>*</i>奖励将在每次完成收礼要求后，由系统自动发放~</p>
                </div>
                <div>
                    <p>赛段奖励</p>
                    <p>3月24日晋级的主播均可获得晋级封面角标-春季联赛百强</p>
                </div>
            </div>
        </Toast>
    </div>
</template>

<style lang='scss' scoped></style>